2: Installing Joomla, doctype and the blank joomla template

Installing Joomla

There are several ways to do this, fantastico, manually, and there is a handy
tool to do it http://joomla.astang.com/autoinstall. Please note I have never
used this, so you are on your own!

My preferred method is to do it manually, its really pretty easy, especially
if you have cpanel on your host server:

Go to your SQL databases and create (through phpAdmin) a database and user
to use with Joomla.
Go to the file manager in your cpanel.
Create a directory for your site. Or if you are using a subdomain like we
are (livesite.compassdesigns.net), the folder is automatically created when you
create the subdomain. Navigate to the folder.
Use the Upload file link to upload a full version of Joomla (sneak to your
local Starbucks/College to take advantage of a big fat free connection).
Click once on your uploaded file and you will see a menu appear. Click on
“extract file contents”.
Your done!

Now, we have only uploaded the files, we haven’t “installed” it yet. I am not
going to go into details of how to install http://help.joomla.org/content/view/39/132/

The Blank Joomla Template

Now, one of the points here is to start with a blank joomla
livesitedesign.zip.
In this file are the various files and folders that make up a blank Joomla
template:

index.php
This file is the most important. It lays out
the site and tells the joomla CMS where to put the different components and
modules.
templateDetails.xml
This files details the author,
copyright and what files make up the template (including any images used)
template_thumbnail.png
A simple image of your template
(via a screen shot). Not critical
css/template_css.css
The CSS of the template. The folder
location is optional, but you have to specify where it is. Note that the file
name is only important in that its referenced in index.php. You could call it
what you like.
images/
Any images that go with the template. Again for
organization reasons, most designers put this in an images folder. Our will
start out empty.

To add the template (again, copious tutorials exist) you go to the admin
portion of your site and install the template by uploading the zip file.

Note you can actually add the files individually (not in a zip) too. You have
to put them in yoursite.com/templates.

The index.php: joomla doctype

Overview of a Joomla Design

So here we are getting to the first significant part of this project. What
actually is in an index.php file? The part we are going to talk about is the
“doctype”. This bit of code that code goes at the very top of a web page. Here
things start getting messy, and to be honest, I only have a vague grip on it
myself! If you don’t want to be bothered by all the technical details, just be
aware that at the top of our page we have this in our template:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
<html
xmlns=”http://www.w3.org/1999/xhtml” lang=”<?php echo _LANGUAGE;
?

Got it? OK, you can skip the next part then…

Browser Wars

The nitty gritty of doctypes starts getting messy. I especially like this
observation from alistapart.com, [information on W3C’s site about doctypes is]
“written by geeks for geeks. And when I say geeks, I donÂ’t mean ordinary web
professionals like you and me. I mean geeks who make the rest of us look like
Grandma on the first day SheÂ’s Got Mail.Â™”. Anyway, there are several doctypes
you can use. Basically, the doctype tells the browser how to interpret the page.
Here the words “strict” and “transitional” start getting floated around
(float:left and float:right usually). Essentially, ever since it started,
different browsers have had different levels of support for CSS. This means for
example, that Internet Explorer won’t understand the “min-width” command to set
a minimum page width. Shame really, because then you have to use “hacks” in CSS
to duplicate the effect. Strict means the html (or xhtml) will be interpreted
exactly as dictated by standards. A transitional doctype means that the page
will be allowed a few agreed upon differences to the standards.

Now to complicate things, there is something called “quirks” mode. If the
doctype is wrong, outdated, or not there, then the browser goes into quirks
mode. This is an attempt to be backwards compatible, so Internet Explorer for
example, will render the page pretending as if it was IE4. Scary eh?

Now, unfortunately, people sometimes end up in quirks mode accidentally. It
usually happens two ways:

They use the doctype declaration straight from the WC3 web page, the link
ends up as:

DTD/xhtml1-strict.dtd

Except this is a relative link on the
WC3 server. You need the full path as I showed above.
Microsoft got involved again (I swear they do all their development after
they’ve been down the pub) and set up IE6 so you could have valid pages, but be
in quirks mode. This happens by having an “xml prolog” put before the doctype.

<?xml version=”1.0″
encoding=”iso-8859-1″?

The part about IE6 quirks mode is
important for us. We are only really designing for IE6+, so we will make sure
that its running in standards mode. This will minimize the hacks we have to do
later on. Its worth noting that the xml prolog isn’t essential anyway. We’ll be
taking note of future releases of Joomla and be leaving it off.

Standards Compliant Joomla

So, here is the good bit, making a page standards compliant, where you see
“valid xhtml” at the bottom of the page. Having your page be standards compliant
does not mean really difficult coding, or hard to understand tags. It merely
means that the code you use matches the doctype you said it would. That’s it!
Nothing else. Sometimes I get the feeling that people think of standards as some
higher level of coding, but really its just saying what you do, and then doing
what you say.

Some useful links:

What else is in index.php?

Let’s look at the structure of the header first. A great outline is at http://help.joomla.org/content/view/44/60/. Unfortunately it
does have a layout based on tables, but we will change that.

We want to be as minimal as possible, but still have enough for a production
site. The header information we will use is:

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this
location is not allowed.’ ); ?
<!DOCTYPE html PUBLIC “-//W3C//DTD
XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
<html
xmlns=”http://www.w3.org/1999/xhtml” lang=”<?php echo _LANGUAGE;
?
<head
<meta http-equiv=”Content-Type”
content=”text/html; <?php echo _ISO; ?
<?php mosShowHead();
?
<script type=”text/javascript”
<style
type=”text/css” media=”screen”
“<?php echo
$mosConfig_live_site; ?
/css/template_css.css”;</style
</head

OK, so what’s all that?

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this
location is not allowed.’ ); ?

Makes sure that the file isn’t being accessed directly.

We talked about this above. The “<?php echo _LANGUAGE; ?

What character set we are using (don’t ask).

<?php mosShowHead(); ?

Header stuff that is set in the global configuration again. It includes the
following tags (for example):

<title
<meta name=”description” content=”Installing Joomla, doctype and the
blank joomla template” /
<meta name=”keywords” content=”installing joomla, joomla doctype, blank
joomla tempate” /
<meta name=”Generator” content=”Joomla! – Copyright (C) 2005 Open Source
Matters. All rights reserved.” /
<meta name=”robots” content=”index, follow” /
<link rel=”shortcut icon” href=”images/favicon.ico” /

We’ll come back to this later.

<script type=”text/javascript”

To stop a bug, that being a flash of un styled content. Details courtesy of
Blue Robot. Note this can be any script file and we’ll be adding one in here
later.

I am using import as a way to stop the site breaking with Netscape 4. Users
of ancient browsers won’t be able to get the CSS sheet so will see our neat un
styled content. If you wanted to cater to these older browsers, we would have
too many CSS hacks, so we do this. Somewhat of a brutal one, but hey, what are
you doing with Netscape 4 anyway?

A blank joomla template body

This will be very very easy! Ready?

<body
<?php echo $mosConfig_sitename;
?
<?php mospathway() ?
<?php
mosLoadModules(‘top’);?
<?php mosLoadModules(‘left’);?
<?php
mosMainBody(); ?
<?php mosLoadModules(‘right’);?
<?php
mosLoadModules(‘bottom’);?
<?php include_once(‘includes/footer.php’);
?
</body
</html

Now that’s what I call lean code! I have a reasonably logical order:

name of the site
the pathway
top module (maybe navigation?)
left modules
main content
right modules
any bottom modules
footer

This order is called semantic markup. Or at least by the time we add our
titles and sub-titles it is. Basically, it means the term paper like you used to
write at college, you know, the one with neat logical titles, headers and
organization. From a web point of view, it means a page can be read by anyone, a
browser, a spider or a screen reader. Semantic layout is the cornerstone of
accessibility. For the wiki amongst you you can read more about semantic layout
here.

Now its worth noting that what we have here really is only the potential for
semantic layout. If one were to go ahead and put random modules in random
locations, then you would have a mess. An important consideration for CMS sites,
a template is only as good as the population of the content. It is this that
often trips desingers up when trying to make their valid joomla template.

Now at this point, the only CSS I have applied is set all text to Verdana and
76% size.

A preview from our next joomla tutorial

Tutorial 3: Free Web Design Tools
So we are about to begin design the site for
real, but first we need a few tools. Now, everyone probably has their own
favorites, but here is a list I have been working on of all the tools you will
need to design a site. The good part? They are all free for the
downloading.

Important Note!

This tutorial series was written in 2005. Since then I have developed some official documentation for Joomla template design.
It uses a superior CSS layout strategy that does not reply on absolute
positioning, which allows easier clearing of the footer. You can find
out more at:

www.compassdesigns.net/tutorials/joomla-tutorials/joomla-template-tutorial.html
www.compassdesigns.net/joomla-library/joomla/the-official-joomla-template-tutorial.html